// 云函数地址
const url = 'https://qca4go.fn.thelarkcloud.com/getInfo';
const awardUrl = 'https://qca4go.fn.thelarkcloud.com/getResult';

// 用户信息
const user = {
    id:12345,
    name:'ly',
    sex:'male',
    mineralNum:422
};

// time 越大，转动越慢
const time = 50; 
// 转盘转动的圈数，
const circleNum = 6;

// 根据 url 获取资源；
const getInfo = async function(url) {
    
    let info = null;
    await fetch(url).then( res => {

        return res.json();
    }).then( res => {
        info = res.info;

    }).catch( err => {
        console.log('err:',err);
    });
    return info;
    
}


// 获取配置信息，然后渲染抽奖转盘
getInfo(url).then( res => {
    let { config,awards } = res;

    console.log('config,awards',res);
    console.log(awards);

    // 渲染用户矿石数 ----
    const mineralEle = document.getElementById('mineralNum'); 

    let mineralNum = user.mineralNum;

    ReactDOM.render(
        mineralNum,
        mineralEle
    )
    // 渲染用户矿石数 ------

    // 签到方法
    const login = function(){
        
        // 按钮状态改变
        const buttonEle = document.getElementById('drawLuck-hd__button_container');
        let button = <div class="drawLuck-hd__button drawLuck-hd__button_selected" >已签到</div> ;
        ReactDOM.render(
            button,
            buttonEle
        )

        // 签到矿石数增加，重新渲染用户矿石数
        user.mineralNum = user.mineralNum + 200;
        const mineralEle = document.getElementById('mineralNum');
        ReactDOM.render(
            user.mineralNum,
            mineralEle
        )

    }
    // 渲染签到按钮
    const buttonEle = document.getElementById('drawLuck-hd__button_container');
    let button = <div class="drawLuck-hd__button" onClick={login}>签到</div> ;
    ReactDOM.render(
        button,
        buttonEle
    )






    // 选中 item 
    const selectedItem = function(num){
        const itemEle = document.getElementById('turntable-item' + num);
        
        const item = (
            <div class="turntable-item turntable-item_selected" key={awards[num].id}>
                    <div class="turntable-item__image">
                        <img src={awards[num].imageUrl} alt=""/>
                    </div>
                    <div class="turntable-item__title">{awards[num].title}</div>
            </div>
        );
        ReactDOM.render(
            item,
            itemEle
        )

    }
    // 不选中item 
    const noSelectedItem = function(num) {
        const itemEle = document.getElementById('turntable-item' + num);
        const item = (
            <div class="turntable-item" key={awards[num].id}>
                    <div class="turntable-item__image">
                        <img src={awards[num].imageUrl} alt=""/>
                    </div>
                    <div class="turntable-item__title">{awards[num].title}</div>
            </div>
        );
        ReactDOM.render(
            item,
            itemEle
        )
    }

    // 抽奖函数
    const getAward = async function() {

        

        let result = null;
        console.log('result',result);
        // 向服务器请求抽奖结果 
        const getResult = async function(url) {
            let info = null;
            await fetch(url).then( res => {
                
                return res.json();
            }).then( res => {
                console.log('获取结果成功，结果是：',res);
                info = res;

            }).catch( err => {
                console.log('err:',err);
            });
            
            return info;
            
        }
        // async await 可以很好的将异步过程转换为同步过程；
        await getResult(awardUrl).then( res => {
            result = res.result;

        })
               

        // 扣除 矿石，
        if( user.mineralNum > config[0].mineralNumEachTime){
            user.mineralNum = user.mineralNum - config[0].mineralNumEachTime;
        }else {
            window.alert('矿石不足！');
            return ;
        }
        // 重新渲染矿石数
        const mineralEle = document.getElementById('mineralNum');
        ReactDOM.render(
            user.mineralNum,
            mineralEle
        )
 
        let i = 1;
        // 定时函数
        const id = setInterval( () => {
            selectedItem(i%8);
            if(i > 1) {
                noSelectedItem((i-1)%8);
                
            }
            // 抽奖盘中间的按钮，禁止掉函数 
            const buttonEle = document.getElementById('turntable-item8');
            let button = (
                
                <div class="turntable-item turntable-button">
                    <div class="turntable-button__title">抽奖</div>
                    <div class="turntable-button__text">{config[0].mineralNumEachTime}矿石/次</div>
                </div>
                
            )
            ReactDOM.render(
                button,
                buttonEle
            )

            
            i++;    
        },time)

        // 停止旋转
        setTimeout(() => {
            clearInterval(id);
            selectedItem(result);
            // 打开函数，抽奖盘中间的按钮
            const buttonEle = document.getElementById('turntable-item8');
            let button = (
                
                <div class="turntable-item turntable-button" onClick={getAward}>
                    <div class="turntable-button__title">抽奖</div>
                    <div class="turntable-button__text">{config[0].mineralNumEachTime}矿石/次</div>
                </div>
                
            )
            ReactDOM.render(
                button,
                buttonEle
            )


            
            const awardName = awards[result].title; 
            // 如果获得 矿石 奖品，增加矿石数,
            console.log(awardName);
            if( awardName.match(/矿石/g) ){
                user.mineralNum = user.mineralNum + Number(awardName.match(/[0-9]/g).join(''));
            }
            // 重新渲染矿石数
            const mineralEle = document.getElementById('mineralNum');
            ReactDOM.render(
                user.mineralNum,
                mineralEle
            )

            window.alert('恭喜获得  ' + awardName);
        },time * circleNum * 8 + result * time + 20);
        


    }



    // 渲染抽奖盘
    const turntableEle = document.getElementById('drawLuck-bd__turntable');
    function Turntable(props) {
        
        const config = props.config;
        let awards = props.awards.map( item => item); // 深拷贝，避免下面对awards更改时对全局的 awards 产生影响；


        // // 调整奖品位置,以使奖品满足顺时针排序
        // // 4 和 3 换
        let p = awards[3];
        awards[3] = awards[4];
        awards[4] = p;
        // 4 和 7 换
        p = awards[3];
        awards[3] = awards[7];
        awards[7] = p;
        // 6 和 7 换
        p = awards[5];
        awards[5] = awards[6];
        awards[6] = p;


        // 形成奖品的 React 元素 数组;
        let items = awards.map( award => {
            
            return (
                <div class="turntable-item__container" id={'turntable-item' + award.id} key={award.id}>
                <div class="turntable-item">
                    <div class="turntable-item__image">
                        <img src={award.imageUrl} alt=""/>
                    </div>
                    <div class="turntable-item__title">{award.title}</div>
                </div>
                </div>
            )
        });



        // 构建抽奖盘中间的 按钮
        let button = (
            <div class="turntable-item__container" id='turntable-item8' key='8'>
            <div class="turntable-item turntable-button" onClick={getAward}>
                <div class="turntable-button__title">抽奖</div>
                <div class="turntable-button__text">{config[0].mineralNumEachTime}矿石/次</div>
            </div>
            </div>
        )
        items.splice(4,0,button);


        return <div className="drawLuck-bd__turntable">{items}</div>;
    }

    ReactDOM.render(
        <Turntable awards={awards} config={config} />,
        turntableEle
    )

    
});







